<template>
    <div class="login-container" >
      <!-- 导航栏 -->
      <van-nav-bar class="page-nav-bar" title="登录" />
      <!-- /导航栏 -->
  
      <!-- 登录表单 -->
      <van-form @submit="onSubmit" ref="loginForm">
        <van-field
          v-model="user.mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="userFormRules.mobile"
          type="number"
          maxlength="11"
        >
        <template v-slot:left-icon >
          <i class="toutiao toutiao-shouji"></i>
        </template>
          
        </van-field>
        <van-field
          v-model="user.code"
          name="code"
          placeholder="请输入验证码"
          :rules="userFormRules.code"
          type="number"
          maxlength="6"
        >
        <template v-slot:left-icon>
          <i  class="toutiao toutiao-yanzhengma"></i>
        </template>
          
          <template #button>
            <!-- 倒计时 -->
            <van-count-down v-if="isCountDownShow" :time="1000*60" format="ss 秒" @finish="isCountDownShow=true" />
            <van-button v-else class="send-sms-btn" round size="small" type="default" native-type="button" @click="onSendSms">发送验证码</van-button>
          </template>
        </van-field>
        <div class="login-btn-wrap">
          <van-button  class="login-btn" block type="info" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
      <!-- /登录表单 -->
    </div>
  </template>
  <script>
  import { login,SendSms } from '@/api/user'
  export default {
    name: 'LoginIndex',
    components: {},
    props: {},
    data () {
      return {
        isCountDownShow:false,
        user: {
          mobile: '', // 手机号
          code: '' // 验证码
        },
        userFormRules: {
          mobile: [{
            required: true,
            message: '手机号不能为空'
          }, {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: '手机号格式错误'
          }],
          code: [{
            required: true,
            message: '验证码不能为空'
          }, {
            pattern: /^\d{6}$/,
            message: '验证码格式错误'
          }]
        }
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
      async onSubmit () {
        // 1. 获取表单数据
        const user = this.user
        
        // TODO: 2. 表单验证
  
        // 3. 提交表单请求登录
        this.$toast.loading({
          message: '登录中...',
          forbidClick: true, // 禁用背景点击
          duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
        })
        try {
          const res = await login(user)
          console.log('登录成功', res)
          this.$toast.success('登录成功')
          //通过mutations将数据存到vuex当中
          this.$store.commit('setUser',res.data.data)
        } catch (err) {
          if (err.response.status === 400) {
            this.$toast.fail('手机号或验证码错误')
          } else {
            this.$toast.fail('登录失败，请稍后重试')
          }
        }
        // 4. 根据请求响应结果处理后续操作
      },
      async onSendSms(){
      try {
        await this.$refs.loginForm.validate('mobile')
      }catch(err){
        return console.log('验证失败' ,err);
      }
      //通过验证显示倒计时
      this.isCountDownShow=true
      //请求发送验证码
      try{
        await SendSms(this.user.mobile)
        this.$toast('发送成功')
      }catch(err){
        //发送失败关闭倒计时
        this.isCountDownShow=false
        if(err.response&& err.response.status===429){
          this.$toast('发送太频繁了，请稍后重试')
        }else{
          this.$toast('发送失败，请稍后重试')
        }
      }
      }
    }
  }
  </script>
  <style scoped lang="less">
  .login-container {
    .toutiao {
      font-size: 37px;
    }
    .send-sms-btn {
      width: 152px;
      height: 46px;
      line-height: 46px;
      background-color: #ededed;
      font-size: 22px;
      color: #666;
    }
    .login-btn-wrap {
      padding: 53px 33px;
      .login-btn {
        background-color: #6db4fb;
        border: none;
      }
    }
  }
  </style>